<template>
  <div class="charts-wrapper">
    <select v-model="currentChart">
      <option v-for="(value, key) in chartLists" :key="key">
        {{value.name}}
      </option>
    </select>
    <keep-alive>
      <component :is="currentChart"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Charts',
  data () {
    return {
      chartLists: {
        Bar: { name: 'Bar' },
        Chord: { name: 'Chord' },
        SunBurst: { name: 'SunBurst' }
      },
      currentChart: 'Bar'
    }
  },
  components: {
    Bar: () => import('./components/bar/bar.vue'),
    Chord: () => import('./components/chord/chord.vue'),
    SunBurst: () => import('./components/sunburst/sunburst.vue')
  },
  updated () {
    console.log(this.currentChart);
  }
}
</script>

<style lang="less" scoped>

</style>
